 <!-- <script setup>

import { ref } from 'vue';
import Test from './components/Test.vue';
import Goo from './components/Goo.vue';
import Demo from './components/demo.vue'

let arr = [
  {
    id:1,
    title:'给我一首歌的时间',
    content:'能不能给我一首歌的时间',
    author:'总经理'
  },
  {
    id:2,
    title:'给我一首歌的时间',
    content:'能不能给我一首歌的时间',
    author:'总经理'
  },
  {
    id:3,
    title:'给我一首歌的时间',
    content:'能不能给我一首歌的时间',
    author:'总经理'
  },
]





let blog = ref({
  title:'',
  content:'',
  author:'' 
})
let blogs = ref(arr)
let isSeen = ref(false)




function btnSave(){
  console.log("保存");
  isSeen.value=false
  if(blog.value.id>0){
    let tmpArr = blogs.value.filter(item => item.id === id)
    if(tmpArr.length > 0){
      let tmpObj = tmpArr[0]

      tmpObj.title = blog.value.title;
      tmpObj.content = blog.value.content;
      tmpObj.author = blog.value.author;
    }
  }else{ 
      let ids = blogs.value.map(item => item.id)
      let maxId = Math.max(...ids)
      blog.value.id=maxId+1;
      blogs.value.push(blog.value)
  }

 
  // 重置 blog 对象
  
  }




function btnAdd(){
  console.log('新增');

  blog.value = {}
  isSeen.value = true

}

function btnDel(id){
  console.log(id);
  
  let idx = blogs.value.findIndex(item=>item.id === id);
  blogs.value.splice(idx,1)
}

function btnFind(){
    
    
}

function btnEdit(id){
  
  console.log(id);
  let tmpArr = blogs.value.filter(item => item.id === id)
  console.log(tmpArr);
  if(tmpArr.length>0){
    let tmpObj = tmpArr[0];
    console.log(tmpObj);
    blog.value = tmpObj;
    
  }
  isSeen.value = true
}



function btnCancel(){
  isSeen.value=false
}


</script>




<template>
  <Demo></Demo>
<Goo></Goo>
  <div>
    <Test></Test>
    
    <div v-show="isSeen" class="addOrEdit">
      <form>
        <table>
          <tbody>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text" v-model="blog.title"></td>
            </tr>
            <tr>
              <td><label for="">内容</label></td>
              <td><input type="text" v-model="blog.content"></td>
            </tr>

            <tr>
              <td><label for="">作者</label></td>
              <td><input type="text" v-model="blog.author"></td>
            </tr>
            <tr>
              <td>
                <input type="button" value="确认保存" @click="btnSave()">
              </td>
              <td>
                <input type="button" value="取消保存" @click="btnCancel()">
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div class="operation">
        <input type="text" placeholder="baby我们的过去好像拖拉机">
        <input type="button" value="查找" @click="btnFind()">
        <input type="button" value="新增" @click="btnAdd()">
    </div>
    <div class="list">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>内容</th>
          <th>作者</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="blog in blogs" :key="blog.id">
          <td>{{blog.id}}</td>
          <td>{{blog.title}}</td>
          <td>{{blog.content}}</td>
          <td>{{blog.author}}</td>
          <td>
            <input type="button" value="编辑" @click="btnEdit(blog.id)">
            <input type="button" value="删除" @click="btnDel(blog.id)">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
</template> -->

<script setup>


function 按钮(){
  console.log(text)
}

</script>
<template>
<!-- 单行文本输入框绑定

题目描述：创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，当用户在输入框中输入内容并点击按钮时，页面上显示输入的内容。 -->

<input type="text" placeholder="请输入内容" v-model="text" >
<input type="button" value="按钮" @click="按钮()">

</template>